﻿<style type="text/css">
    html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>
<div id="main" style="width: 100%;height:100%;"></div>

<script src="~/Content/lib/echarts/echarts.min.js"></script>
<script>
    layui.use(['jquery'], function () {
        var $ = layui.jquery;
        var myChart = echarts.init($("#main")[0]);
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '2019-2020年租赁价格同比对照'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['2019一线城市价格', '2019二线城市价格', '2019其他城市价格', '2020一线城市价格', '2020二线城市价格', '2020其他城市价格']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '价格（元/㎡*月）'
                }
            ],
            series: [
                {
                    name: '2019一线城市价格',
                    type: 'bar',
                    stack: '2019',
                    data: [28.21, 28.39, 28.39, 28.16, 28.34, 27.79, 28.48, 28.59, 28.38, 29.71, 30.59, 30.46],
                    color: '#9fb5ea'
                },
                {
                    name: '2019二线城市价格',
                    type: 'bar',
                    stack: '2019',
                    data: [21.44, 21.47, 21.59, 22.21, 21.78, 21.64, 22.12, 21.71, 21.67, 23.15, 23.84, 24.33],
                    color: '#66E0E3'
                },
                {
                    name: '2019其他城市价格',
                    type: 'bar',
                    stack: '2019',
                    data: [14.63, 14.45, 15.15, 14.85, 14.98, 14.77, 15.01, 14.93, 14.95, 16.20, 16.44, 16.20],
                    color: '#9fb5ea'
                },
                {
                    name: '2020一线城市价格',
                    type: 'bar',
                    stack: '2020',
                    data: [30.67, 30.69, 30.78, 30.72],
                    color: '#800080'
                },
                {
                    name: '2020二线城市价格',
                    type: 'bar',
                    stack: '2020',
                    data: [24.73, 23.35, 24.48, 23.93],
                    color: '#3FA7FF'
                },
                {
                    name: '2020其他城市价格',
                    type: 'bar',
                    stack: '2020',
                    data: [16.51, 16.17, 16.59, 16.42],
                    color:'#9feaa5'
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })
</script>